<template>
	<!-- <view>
		注册页面
	</view> -->
	<view class="box">
		<view class="photo">
			<image :src="icon" mode=""></image>
		</view>
		<view class="content">
			<view class="item">
				<input type="text" v-model="phone" placeholder="手机号" />
			</view>
			<view class="item">
				<input type="text" v-model="password" placeholder="登录密码" />
			</view>
			<view class="item">
				<input type="text" v-model="username" placeholder="用户名" />
			</view>
			<view class="item">
				<input type="text" v-model="nickname" placeholder="昵称" />
			</view>
			<view class="item huo">
				<input type="text" v-model="yan" placeholder="验证码" />
				<view> 获取验证码</view>
			</view>
		</view>
		<view class="reg" @click="enroll">注册</view>
		<view class="bottom">  <label class="radio"><radio value="r1" :checked="agreement" />同意协议</label></view>
	</view>
</template>

<script>
	import {register} from "../../../api/mine/login/index.js"
	export default {
		data() {
			return {
				icon:"/static/icons/leju-logo.png",
				//手机号
				phone:"17877777777",
				//登录密码
				password:"123456",
				//用户名
				username:"17877777777",
				//昵称
				nickname:"九",
				//验证码
				yan:"123",
				//协议
				agreement:true,
			};
		},
		methods:{
			//点击注册
			enroll(){
				if(this.phone.length!==11){
					uni.showToast({
						title: '手机号格式不正确'
					});
					return false;
				};
				if(this.password.length<6){
					uni.showToast({
						title: '密码格式不正确'
					});
					return false;
				};
				if(this.username.length<3){
					uni.showToast({
						title: '用户名长度大于3'
					});
					return false;
				};
				if(this.agreement==false){
					uni.showToast({
						title: '请勾选协议'
					});
					return false;
				};
				register({
					phone:this.phone,
					password:this.password,
					username:this.username,
					nickname:this.nickname,
					icon: this.icon,
				}).then(res=>{
					console.log(res)
					if(res.success){
						uni.showToast({
						title: '注册成功',
						})
						setTimeout(()=>{
							uni.redirectTo({
									url: '../user/user'
								})
						},1000)
						
					}else{
						uni.showToast({
							title: '用户名/手机号已注册'
						});
					}
					})
					
			}
		},
		onLoad(){
			
		},
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	// height: 100vh;
	background-color:#F1ECE7;
	overflow: hidden;
	.photo{
		width: 80px;
		height: 80px;
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,.1);
		border-radius: 50%;
		background-color: #000;
		overflow: hidden;
		margin:64px auto 36px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.content{
		padding:0 35px;
		margin: 0 auto;
		
		.item{	
		display: flex;
		justify-content:space-between;
		align-items: center;
		height: 18px;
		color: #333;
		padding: 16px;
		margin: 20px 0;
		box-shadow: 0 0 30px 0 rgba(43,86,112,.1);
		border-radius: 30px;
			input{
				margin:0 20px;
				width: 100%;
			}
		}
		.item.huo{
			color: rgba(0,0,0,.7);
			font-size: 12px;
			line-height: 50px;
			input{
				margin:0 20px;
				width:50%;
			}
		}
	}
	.reg{
		width: 300px;
		height: 50px;
		border-radius: 60px;
		background: rgb(53, 78, 68);
		color: rgb(255, 255, 255);
		margin:50px auto 0;
		text-align: center;
		line-height:50px;
	}
	.bottom{
		width: 100%;
		height: 20px;
		margin: 30px 0 40px;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(0,0,0,.7);
	}
	}
</style>
